feat(grids): add both side column pinning custom samples #925
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds sample implementations demonstrating the column pinning feature with both left and right pinning capabilities across three grid types: Grid, Tree Grid, and Hierarchical Grid.
- Implements column pinning controls (Pin Left, Pin Right, Unpin) via toolbar buttons
- Configures default pinning positions for selected columns
- Creates complete sample applications with data sources and styling
Reviewed Changes
Copilot reviewed 26 out of 30 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| samples/grids/tree-grid/column-pinning-both-sides/src/index.tsx | Tree grid implementation with employee data and dual-side pinning |
| samples/grids/hierarchical-grid/column-pinning-both-sides/src/index.tsx | Hierarchical grid implementation with customer/order data and nested pinning config |
| samples/grids/grid/column-pinning-both-sides/src/index.tsx | Basic grid implementation with customer data and dynamic column configuration |
| samples/grids/tree-grid/column-pinning-both-sides/src/EmployeesFlatDetails.ts | Employee data model and sample dataset |
| samples/grids/grid/column-pinning-both-sides/src/CustomersData.ts | Customer data model and sample dataset |
| samples/grids/*/column-pinning-both-sides/package.json | Package dependencies for all three sample projects |
| samples/grids/*/column-pinning-both-sides/tsconfig.json | TypeScript configuration for all three samples |
| samples/grids/*/column-pinning-both-sides/ReadMe.md | Documentation for running the samples |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| field="Title" | ||
| dataType="string" | ||
| width="250px" | ||
| pinned={true} |
There was a problem hiding this comment.
The 'Title' column is missing an explicit pinningPosition property. Without it, the column will use the default pinning position from pinningConfig (ColumnPinningPosition.End), but this is inconsistent with the 'Name' column above it which explicitly sets pinningPosition={ColumnPinningPosition.Start}. For clarity and to avoid unexpected behavior, specify the intended pinning position explicitly.
| pinned={true} | |
| pinned={true} | |
| pinningPosition={ColumnPinningPosition.End} |
| <IgrColumn | ||
| field="ContactName" | ||
| header="Contact Name" | ||
| pinned={true} |
There was a problem hiding this comment.
The 'ContactName' column is missing an explicit pinningPosition property. Without it, the column will use the default pinning position from pinningConfig (ColumnPinningPosition.End), but this is inconsistent with the 'Company' column above it which explicitly sets pinningPosition={ColumnPinningPosition.Start}. Specify the intended pinning position explicitly.
| pinned={true} | |
| pinned={true} | |
| pinningPosition={ColumnPinningPosition.Start} |
| ></IgrColumn> | ||
| <IgrColumn | ||
| field="ShippedVia" | ||
| header="Shipped Via" | ||
| dataType="string" | ||
| resizable={true} |
There was a problem hiding this comment.
The 'ShipName' and 'ShippedVia' columns are both pinned but lack explicit pinningPosition properties. Without explicit positions, they will use the default from pinningConfig (ColumnPinningPosition.End), which may not be the intended behavior since the first column 'OrderDate' is explicitly pinned to Start. Specify pinning positions for consistency.
ChronosSF
added
status: verified
2 participants
No description provided.